/**
 * Created by Administrator on 2018/4/16 0016.
 */
import config from '../../../../config/config.js'
import { clearHours, isInRange } from '../util'
// mixins
import Locale from '../../../../mixins/locale.js'
import jsCalendar from 'js-calendar'

import mixin from './mixin'
// prefix
const prefixCls = config.prefix + '-date-picker-cells'

export default {
  mixins: [Locale, mixin],
  props: {
    /* more props in mixin */
    /**
     * #property
     *
     * @name        showWeekNumbers
     * @cn          是否显示星期数字
     * @group       控制
     * @type        boolean
     * @value      false
     * @description  是否显示星期数字
     */
    showWeekNumbers: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const weekStartDay = Number(this.t('i.datepicker.weekStartDay'))
    return {
      prefixCls: prefixCls,
      calendar: new jsCalendar.Generator({ onlyDays: !this.showWeekNumbers, weekStart: weekStartDay })
    }
  },
  computed: {
    classes () {
      return [
                `${prefixCls}`,
                {
                  [`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
                }
      ]
    },
    headerDays () {
      const weekStartDay = Number(this.t('i.datepicker.weekStartDay'))
      const translatedDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].map(item => {
        return this.t('i.datepicker.weeks.' + item)
      })
      const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay))
      return this.showWeekNumbers ? [''].concat(weekDays) : weekDays
    },
    readCells () {
      const tableYear = this.tableDate.getFullYear()
      const tableMonth = this.tableDate.getMonth()
      const today = clearHours(this.startDate || new Date()) // timestamp of today
      const selectedDays = this.dates.filter(Boolean).map(clearHours) // timestamp of selected days
      const [minDay, maxDay] = this.dates.map(clearHours)
      const rangeStart = this.rangeState.from && clearHours(this.rangeState.from)
      const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to)

      const isRange = this.selectionMode === 'range'
      const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate

      return this.calendar(tableYear, tableMonth, (cell) => {
        const time = cell.date && clearHours(cell.date)
        const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth()
        return {
          ...cell,
          type: time === today ? 'today' : cell.type,
          selected: dateIsInCurrentMonth && selectedDays.includes(time),
          disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
          range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
          start: dateIsInCurrentMonth && isRange && time === minDay,
          end: dateIsInCurrentMonth && isRange && time === maxDay
        }
      }).cells.slice(this.showWeekNumbers ? 8 : 0)
    }
  },
  methods: {
    getCellCls (cell) {
      return [
                `${prefixCls}-cell`,
                {
                  [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
                  [`${prefixCls}-cell-disabled`]: cell.disabled,
                  [`${prefixCls}-cell-today`]: cell.type === 'today',
                  [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
                  [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
                  [`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
                  [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                }
      ]
    }
  }
}
